<template>
  <div class="details">
    <van-nav-bar
      title="详情页"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="img">
      <img :src="movieinfo.posters" alt="" height="200px" srcset="" />
    </div>
    <div class="bottom">
      <h2>{{ movieinfo.name }}</h2>
      <div class="label">
        <span class="title">标签：</span>
        <van-tag type="warning">{{ movieinfo.category }}</van-tag>
      </div>
      <div>
        <span class="title">简介：</span>
        <span class="jian">{{ movieinfo.Introduction }}</span>
      </div>
      <!-- 影院 -->
      <div class="cinema">
        <van-field
          readonly
          clickable
          label="影院"
          :value="value"
          placeholder="选择影院"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
    </div>

    <!-- 用户评价 -->
    <div class="evaluation" @click="toEvaluation()">
      <span>用户评价</span>
      <span>{{ total }}条></span>
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        :color="!status ? '' : '#ff5000'"
        @click="collection(movieinfo.id)"
      />
      <van-goods-action-button
        type="danger"
        @click="btnadd(movieinfo.id)"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movieinfo: {},
      total: 0,
      comments: [],
      status: 0,
      value: "",
      showPicker: false,
      columns: [],
    };
  },
  created() {
    this.getStoreup(this.$route.params.id);
    this.getMovieById(this.$route.params.id);
    this.getCinema()
  },
  methods: {
    //获取影院数据
    async getCinema(){
      const { data: res } = await this.$http.get(`cinema`);
      if (res.status !== 200) return this.$message.fail("获取影院数据失败！");
      this.columns = res.data
    },
    //选择影院
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    //获取电影信息
    async getMovieById(id) {
      const { data: res } = await this.$http.get(`movieinfo/${id}`);
      if (res.status !== 200) return this.$message.fail("获取电影失败");
      this.movieinfo = res.data.movieinfo;
      this.total = res.data.total;
      this.comments = res.data.comments;
    },
    //获取是否收藏
    async getStoreup(refid) {
      const { data: res } = await this.$http.post(`storeup/` + refid);
      if (res.status !== 200) return this.$message.fail("获取收藏失败");
      this.status = res.data;
    },
    onClickLeft() {
      this.$router.back();
    },
    async collection(refid) {
      const { data: res } = await this.$http.put("storeup/update", {
        status: this.status,
        refid,
      });
      if (res.status !== 200) return this.$message.fail("获取失败");
      this.getStoreup(refid);
    },
    async btnadd(refid) {
      const { data: res } = await this.$http.post("addCar", {
        refid,
        price: this.movieinfo.price,
        moviename: this.movieinfo.name,
        posters: this.movieinfo.posters,
      });
      console.log(res);
      if (res.status !== 200) return this.$message.fail("获取失败");
      this.$router.push("/car");
    },
    toEvaluation() {
      this.$router.push({
        path: "/evaluation",
        query: {
          movieinfo: this.movieinfo,
          comments: this.comments,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.img {
  display: flex;
  justify-content: center;
}
.bottom {
  margin: 20px;
  > div {
    margin: 10px 0px;
  }
}
.label {
  display: flex;
}
.title {
  display: inline-block;
  font-weight: 600;
}
.van-button--block {
  width: 90% !important;
}
.evaluation {
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  padding: 10px 0px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
.jian {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.van-field{
  font-size: 18px !important;
  font-weight: 700;
}
.van-cell{
  padding: 10px 0px !important;
}
</style>